<template>
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="路线名称：" prop="lineName">
      <el-input v-model="ruleForm.lineName" placeholder="请输入路线名称" />
    </el-form-item>
    <el-form-item label="起点：" prop="startingPoint">
        <el-cascader  :options="options" :props="props1" clearable @change="handleChange"  />
    </el-form-item>
    <el-form-item label="起点详细地址：" prop="riseFullAddress">
      <el-input v-model="ruleForm.riseFullAddress" placeholder="请输入详细地址到街道和门牌号" />
    </el-form-item>
    <el-form-item label="终点：" prop="terminal">
      <el-cascader  :options="options2" :props="props2" clearable @change="handleChange2"  />
    </el-form-item>
    <el-form-item label="终点详细地址：" prop="terminalFullAddress" placeholder="请输入详细地址到街道和门牌号" >
      <el-input v-model="ruleForm.terminalFullAddress" />
    </el-form-item>
    <el-form-item label="是否外协：" prop="lineWhether">
      <el-select v-model="ruleForm.lineWhether" placeholder="请选择是否外协">
        <el-option label="是" :value="true" />
        <el-option label="否" :value="false" />
      </el-select>
    </el-form-item>
    <el-form-item label="货主姓名：" prop="ownerName">
      <el-input v-model="ruleForm.ownerName" placeholder="请输入货主姓名" />
    </el-form-item>
    <el-form-item label="货主手机号：" prop="ownerPhone">
      <el-input v-model="ruleForm.ownerPhone" placeholder="请输入手机号"  />
    </el-form-item>
    <el-form-item label="货主单位：" prop="ownerUnit">
      <el-input v-model="ruleForm.ownerUnit" placeholder="请输入货主单位"  />
    </el-form-item>
    <el-form-item label="备注：" prop="lineRemark">
      <el-input v-model="ruleForm.lineRemark" type="textarea" placeholder="请输入备注信息"  />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts" >
import { reactive, ref,onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter();
//生命周期函数钩
onMounted(function () {
    jilian();
    jilian2();
})
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//起点级联方法
const options = ref([])
const props1 = {
    checkStrictly: true,
    expandTrigger: 'hover' as const,
    value: "label",
}
const handleChange = (value:any) => {
    console.log(value)
    ruleForm.startingPoint = value.join("-")
  console.log(ruleForm.riseFullAddress)
}
//级联显示方法
const jilian = () => {
    axios.get("FoundationRead/api/Foundation/GetCascadeDTO?superiorId=0")
        .then(res => {
            options.value = res.data.data;
            console.log(res.data.data)
        })
    
}
//终点级联方法
const options2 = ref([])
const props2 = {
    checkStrictly: true,
    expandTrigger: 'hover' as const,
    value:"label"
}
const handleChange2 = (value:any) => {
    console.log(value)
  ruleForm.terminal = value.join("-")
}
//级联显示方法
const jilian2 = () => {
    axios.get("FoundationRead/api/Foundation/GetCascadeDTO?superiorId=0")
        .then(res => {
            options2.value = res.data.data;
            console.log(res.data.data)
        })
    
}
//添加字段
const ruleForm = reactive({
    lineName: "",
    startingPoint: "",
    riseFullAddress: "",
    terminal: "",
    terminalFullAddress: "",
    lineWhether: "",
    ownerName: "",
    ownerPhone: "",
    ownerUnit: "",
    lineRemark: "",
})
//添加方法
const submitForm = async (formEl: FormInstance | undefined) => {
    
  if (!formEl) return
    await formEl.validate((valid, fields) => {
    console.log(ruleForm)
      if (valid) {
        console.log(ruleForm)
        axios.post("FoundationWrite/api/WeatherFoundation/AddLine", ruleForm)
            .then(res => {
                if (res.data.data>0)
                {
                  ElMessage.success("线路添加成功")
                    router.push("/FoundationShow")
                }
                else
                {
                    ElMessage.error("线路添加失败")
                    return;
                }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//表单校验
const rules = reactive<FormRules>({
  lineName: [
    { required: true, message: '路线名称不能为空', trigger: 'blur' },
  ],
  startingPoint: [
    {
      required: true,
      message: '起点必须选中',
      trigger: 'change',
    },
  ],
  riseFullAddress: [
    { required: true, message: '起点详细地址不能为空', trigger: 'blur' },
  ],
  terminal: [
    {
      required: true,
      message: '终点必须选中',
      trigger: 'change',
    },
  ],
  terminalFullAddress: [
    { required: true, message: '终点详细地址不能为空', trigger: 'blur' },
  ],
  lineWhether: [
    {
      required: true,
      message: '是否外协必须选中',
      trigger: 'change',
    },
  ],
  ownerName: [
    { required: true, message: '货主姓名不能为空', trigger: 'blur' },
  ],
  ownerPhone: [
    { required: true, message: '货主手机号不能为空', trigger: 'blur' },
  ],
  ownerUnit: [
    { required: true, message: '货主单位不能为空', trigger: 'blur' },
  ],
  lineRemark: [
    { required: true, message: '备注不能为空', trigger: 'blur' },
  ],
})

</script>